<template>
    <div>
        <input type="text" placeholder="请输入姓名" v-model="namer"><br>
        <input type="number" placeholder="请输入年龄" v-model="ager"><br>
        <button @click="fn()">添加数据</button>
        {{ id }}
        <ul>
            <li v-for="(item, index) in arr" :key="index">{{ item.name }}--{{ item.age }}</li>
        </ul>
    </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex';
export default {
    data() {
        return {
            namer:"",
            ager:""
        }
    },
    created() {
    },
    computed: {

        // name(){
        //     return this.$store.state.name
        // },

        // ...mapState({name:"name",age:"age"}),
        ...mapState(["arr"]),
        ...mapGetters(["id"])


    },
    methods: {
        fn() {
            this.$store.dispatch("adder", {
                name: this.namer,
                age: this.ager
            })
            this.namer=""
            this.ager=""
        }
    },
}
</script>
<style lang="less" scoped></style>
